<template>
  <view class="pageLayout">
    <view class="banner_box">
      <image
        class="bg-image"
        src="https://www.yinyaoit.com/YY/home_detail_banner.png"
        mode="scaleToFill"
      ></image>
      <view class="date_box">
        <view class="date">{{
          formatTimestamp(detailInfo.startTime, "onlyDate")
        }}</view>
        <view class="time"
          >{{ formatTimestamp(detailInfo.startTime, "getHouseMin") }}——{{
            formatTimestamp(detailInfo.endTime, "getHouseMin")
          }}</view
        >
        <view class="desc">
          <text class="bignum">已预约{{ detailInfo.currentNumber }}人</text>
          <view class="booked" v-if="detailInfo.hasCurrentUser">已预约</view>
          <view
            class="manchu"
            v-if="detailInfo.peopleNumber == detailInfo.currentNumber"
            >已满人</view
          >
        </view>
        <view class="progress">
          <view class="progress_text">热门度</view>
          <view class="progress_bar">
            <u-line-progress
              class="custom-progress"
              :showText="false"
              :percentage="100"
              height="8"
            >
            </u-line-progress>
          </view>
        </view>
      </view>

      <view class="yuyue_btn">
        <u-button
          :loading="loading"
          v-if="!detailInfo.hasCurrentUser"
          @click="clickAppointment"
          size="small"
          shape="circle"
          color="#A22C26"
          customStyle="margin-left: 20rpx;padding:0rpx 22rpx;"
          >点击预约</u-button
        >
      </view>
    </view>
    <view class="detail_box">
      <view class="detail_card">
        <view class="look_btn">
          <u-button
            @click="gotoCustomerList"
            size="small"
            shape="circle"
            color="#ffffff"
            customStyle="margin-left: 20rpx;padding:0rpx 22rpx;width: 200rpx;color: #ff783f;"
            >客资查看</u-button
          >
        </view>
        <view class="hasCurrentUser" v-if="detailInfo">
          <view class="nothasCurrentUser_icon">预约名单</view>
        </view>
        <view class="cel_btn"> </view>
        <!-- <view class="appointment_tiem" v-if="detailInfo">
          {{ detailInfo.startTime }}-{{ detailInfo.endTime }}
        </view> -->
        <view class="isappointment" v-if="detailInfo">
          <view
            class="user_list"
            v-if="detailInfo && detailInfo.listVenue.length > 0"
          >
            <view
              class="user_item"
              v-for="item in detailInfo.listVenue"
              :key="item"
            >
              <view class="user_avatar">
                <image
                  src="../../static/images/sun_avatar.jpg"
                  mode="aspectFit"
                  v-if="userInfo.enterpriseID == 1"
                ></image>
                <image
                  src="../../static/images/hei_avatar.jpg"
                  mode="aspectFit"
                  v-if="userInfo.enterpriseID == 2"
                ></image>
              </view>
              <view class="user_name">{{
                item.realName ? item.realName : ""
              }}</view>
              <!-- <view class="user_btn">
                <u-button
                  type="warning"
                  size="small"
                  v-if="item.openID !== userInfo.openID"
                  @click="clickChange(item)"
                  >互换场次</u-button
                >
                <u-button type="warning" disabled size="small" v-else
                  >互换场次</u-button
                >
              </view> -->
            </view>
          </view>
          <!-- <view v-else class="notData">暂无人预约</view> -->
        </view>
        <!-- <view class="tips"> 预约时间内 请不要擅自离开工位 </view> -->
      </view>
    </view>
    <view class="tips">
      <view class="tips_text">
        预约时间内请不要擅自离开工位，预约成功后可点击查看相关客资，只可以查看自己的客户信息。
      </view>
    </view>
    <view class="bot_btn" v-if="detailInfo.hasCurrentUser">
      <view class="btn_width">
        <u-button
          class="btn"
          :loading="loading"
          @click="clickCancelAppointment"
          size="small"
          shape="circle"
          color="#fbe6e8"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #A22C26;font-weight:700;"
          >取消预约</u-button
        >
      </view>
    </view>

    <u-picker
      :show="showMyAppointment"
      :columns="MyAppointmentList"
      title="选择需要交换的场次"
      keyName="label"
      closeOnClickOverlay
      immediateChange
      @confirm="clickchangeAppointment"
      @cancel="hideTypePicker"
      @close="hideTypePicker"
      confirmText="提交"
    ></u-picker>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import {
  getCustomerClasseseRecordDetailApi,
  VenueCustomerRecordApi,
  CancelCustomerRecordApi,
  QueryCurrentClasseseSelectApi,
  SubmitVenueExchangeApplyApi,
} from "@/api/home/index";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
  },
  data() {
    return {
      classeseRecordID: "",
      detailInfo: null, //详情
      showMyAppointment: false,
      MyAppointmentList: [],
      changeAppointmentInfo: null,
      loading: false,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  onLoad(options) {
    console.log(options, "options");
    this.classeseRecordID = options.id;
    console.log(this.userInfo, "userInfo");
  },
  onShow() {
    this.getDetail();
    // this.getMyAppointmentList();
  },
  methods: {
    /**
     * 客资详情
     */
    gotoCustomerList() {
      // console.log(this.detailInfo);
      uni.navigateTo({
        url: "/pages/customer/list?id=" + this.detailInfo.classeseRecordID,
      });
    },
    /**
     * 获取我的预约列表
     */
    getMyAppointmentList() {
      QueryCurrentClasseseSelectApi()
        .then((res) => {
          console.log(res, "res");
          let arr = res.data.map((item) => {
            let string =
              this.formatTimestamp(item.extensios.recordStartTime, "onlyDate") +
              " " +
              this.formatTimestamp(
                item.extensios.recordStartTime,
                "getHouseMin"
              ) +
              "-" +
              this.formatTimestamp(item.extensios.recordEndTime, "getHouseMin");
            return {
              ...item.extensios,
              label: string,
              id: item.value,
            };
          });
          this.MyAppointmentList = [arr];
          console.log(this.MyAppointmentList);
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 获取详情
     */
    getDetail() {
      let data = {
        classeseRecordID: this.classeseRecordID,
      };
      getCustomerClasseseRecordDetailApi(data)
        .then((res) => {
          console.log(res, "res");
          this.detailInfo = res.data;
          this.loading = false;
        })
        .catch((e) => {
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
    /**
     * 点击预约
     */
    clickAppointment() {
      let data = {
        classeseRecordID: this.classeseRecordID,
      };
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 50);
      VenueCustomerRecordApi(data)
        .then((res) => {
          console.log(res, "res");

          this.$refs.toastRef.showToast({
            msg: "预约成功",
            duration: 1000,
            position: "center",
          });

          this.getDetail();
          this.loading = false;
        })
        .catch((e) => {
          uni.hideToast();
          // console.log(e,'e');
          this.getDetail();
          if (e.data.detail === "人数已满") {
          }
          this.loading = false;
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 300,
            position: "center",
          });
        });
    },
    /**
     * 点击取消预约
     */
    clickCancelAppointment() {
      let data = {
        classeseRecordID: this.classeseRecordID,
      };
      uni.showModal({
        title: "温馨提示",
        content: "您确定要取消预约吗？",
        showCancel: true,
        confirmText: "确定",
        cancelText: "关闭",
        confirmColor: "#FF6B00",
        success: (res) => {
          if (res.confirm) {
            this.loading = true;
            CancelCustomerRecordApi(data)
              .then((res) => {
                console.log(res, "res");
                this.$refs.toastRef.showToast({
                  msg: "取消成功",
                  duration: 1000,
                  position: "center",
                });
                this.getDetail();
              })
              .catch((e) => {
                uni.hideToast();
                this.loading = false;
                // console.log(e,'e');
                this.$refs.toastRef.showToast({
                  msg: e.data.detail,
                  duration: 1000,
                  position: "center",
                });
              });
          }
        },
      });
    },
    /**
     * 点击互换场次
     */
    clickChange(item) {
      console.log(item, "item");
      if (this.detailInfo.hasCurrentUser) {
        return this.$u.toast("您已预约该场次");
      }
      this.changeAppointmentInfo = item;
      this.showMyAppointment = true;
    },
    /**
     * 关闭预约选择器
     */
    hideTypePicker() {
      this.showMyAppointment = false;
      this.changeAppointmentInfo = null;
    },
    /**
     * 选择预约
     */
    clickchangeAppointment(val) {
      console.log(val, "val");
      let data = {
        exchangeClasseseRecordID: this.classeseRecordID,
        classeseRecordID: val.value[0].id,
        exchangeOpenID: this.changeAppointmentInfo.openID,
        exchangeUserID: this.changeAppointmentInfo.userID,
      };
      SubmitVenueExchangeApplyApi(data)
        .then((res) => {
          console.log(res, "res");
          this.$refs.toastRef.showToast({
            msg: "申请成功",
            duration: 1000,
            position: "center",
          });
          this.getDetail();
          this.hideTypePicker();
        })
        .catch((e) => {
          this.loading = false;
          uni.hideToast();
          this.$refs.toastRef.showToast({
            msg: e.data.detail,
            duration: 1000,
            position: "center",
          });
        });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f7fb;
}
</style>
<style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
  padding-bottom: 180rpx;
}

.banner_box {
  position: relative;
  width: 100%;
  height: 329rpx;

  .date_box {
    position: absolute;
    top: 85rpx;
    left: 88rpx;

    .date {
      font-size: 30rpx;
      color: #a22c26;
      font-weight: 700;
    }

    .time {
      font-size: 30rpx;
      color: #a22c26;
      font-weight: 700;
    }

    .desc {
      width: 100%;
      font-size: 24rpx;
      margin-top: 9rpx;

      .bignum {
        font-size: 24rpx;
        margin-right: 14rpx;
        color: rgba(28, 27, 38, 0.5);
      }
    }
  }

  .yuyue_btn {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 200rpx;
  }

  .bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .title {
    position: relative; // 需要提升层级
    z-index: 1;
    /* 原有样式保持不变 */
  }
}

.detail_box {
  margin-top: 40rpx;
  position: relative;

  .detail_title {
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .detail_card {
    width: 100%;
    // height: 800rpx;
    min-height: 800rpx;
    background-image: url("https://www.yinyaoit.com/YY/detail_list_banner.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20rpx;
    border-radius: 20rpx;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    position: relative;

    .cel_btn {
      position: absolute;
      top: 20rpx;
      right: 10rpx;
    }
  }
  .look_btn {
    position: absolute;
    right: 40rpx;
    top: 20rpx;
    width: 200rpx;
  }

  .hasCurrentUser_icon {
    color: #fff;
    text-align: center;
  }

  .hasCurrentUser {
    margin-top: 60rpx;
    margin-bottom: 40rpx;
  }

  .nothasCurrentUser_icon {
    color: #fff;
    text-align: center;
  }

  .appointment_tiem {
    margin-top: 40rpx;
    text-align: center;
    color: #fff;
    font-size: 26rpx;
  }

  .isappointment {
    text-align: center;
    color: #fff;
    margin-top: 20rpx;
  }

  .isappointment_title {
    font-size: 30rpx;
  }

  .cut_rule {
    margin-top: 10rpx;
  }

  .user_list {
    margin-top: 20rpx;

    .user_item {
      margin: 0 auto;
      // width: 500rpx;
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;
      justify-content: center;

      .user_avatar {
        display: flex;
        align-items: center;
        height: 58rpx;
        width: 58rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 54rpx;

        image {
          height: 58rpx;
          width: 58rpx;
        }
      }

      .user_name {
        // flex: 1;
        // width: 250rpx;
        font-size: 32rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 20rpx;
      }
    }
  }

  .notData {
    color: #fff;
    margin-top: 50rpx;
    text-align: center;
  }
}

.bot_btn {
  border-top: 1rpx solid #801c1b26;
  position: fixed;
  bottom: 0;
  // width: 80%;
  left: 50%;
  transform: translateX(-50%);
  // background-color: #d52227;
  padding: 20rpx;
  padding-bottom: 50rpx;
  background-color: white;
  width: 100%;

  // box-shadow: #a5a5a5 0px 0px 6px;
  .btn_width {
    width: 60%;
    margin: 0 auto;
  }
}

.tips {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 559rpx;
  margin: 0 auto;
  // height: 60rpx;

  .tips_text {
    font-weight: 600;
    font-size: 22rpx;
    color: #a22c26;
    line-height: 30rpx;
    letter-spacing: 1px;
    text-align: center;
    font-style: normal;
  }
}

.manchu {
  margin: 0 14rpx;
  display: inline-block;
  padding: 5rpx 10rpx;
  font-size: 20rpx;
  line-height: 20rpx;
  background: linear-gradient(180deg, #ffe104 0%, #ff7a01 100%);
  color: #fff;
  // width: 72rpx;
  // height: 24rpx;
  text-align: center;
  border-radius: 4rpx;
}

.booked {
  margin: 0 14rpx;
  margin-right: 0rpx;
  display: inline-block;
  padding: 5rpx 10rpx;
  font-size: 20rpx;
  line-height: 20rpx;
  color: #fff;
  background: linear-gradient(180deg, #cf574e 0%, #a22c26 100%);
  // width: 72rpx;
  // height: 24rpx;
  text-align: center;
  border-radius: 4rpx;
}

.progress {
  display: flex;
  align-content: center;
  margin-top: 10rpx;

  .progress_text {
    font-size: 20rpx;
    color: #a22c26;
    display: inline-block;
    margin-right: 10rpx;
  }

  .progress_bar {
    width: 210rpx;
    height: 8rpx;
    padding-top: 8rpx;
  }

  ::v-deep .u-line-progress__line {
    background-color: transparent !important;
    background: linear-gradient(270deg, #eb2d40 0%, #fcc75f 100%) !important;
    z-index: 9999;
  }
}
</style>